<template>
  <div class="home">
    <!-- 二级路由占位符 -->
    <router-view />
     <!-- 底部选项卡 -->
    <van-tabbar v-model="active" 
    active-color="#409EFF">
      <van-tabbar-item replace to="/home/index">
        首页
        <template #icon="props">
          <img :src="`/tabs/index_${props.active?1:0}.png`" >
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/home/trip">
        订单
        <template #icon="props">
          <img :src="`/tabs/show_${props.active?1:0}.png`"  >
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/home/me">
        我的
        <template #icon="props">
          <img :src="`/tabs/me_${props.active?1:0}.png`"  >
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const active = ref(0)
</script>


<style lang="scss" scoped>

</style>